<template>
  <div class="service-sign">
    <loading :show="loading" />
    <div class="notice" @click="sign">
      <span :class="{'active': isSignForDay}">{{ isSignForDay ? '今天已签到' : '点击签到' }}</span>
    </div>
    <ul class="list">
      <li
        v-for="(item, index) in list"
        :key="index"
        class="list-item"
      >
        <p class="time">签到时间: <span>{{ item.create_time }}</span></p>
        <p class="score">获取得积分: <span>+{{ +item.score }}</span></p>
        <p class="ip">IP: <span>{{ item.ip }}</span></p>
      </li>
    </ul>
    <pull-up
      :loading="loading"
      :busy="queryList.busy"
      :data-len="list.length"
      @loadMore="loadMore" />
  </div>
</template>

<script>
import Loading from '@/components/Loading'
import api from '@/api'
import base64 from '@/util/base64'
import { isWxBrowser } from '@/util/wx'
import PullUp from '@/components/PullUp'

export default {
  name: 'SignIn',
  components: {
    Loading,
    PullUp
  },
  data() {
    return {
      loading: false,
      isSignForDay: false,
      list: [],
      disabled: false,
      queryList: {}
    }
  },
  inject: ['reload'],
  methods: {
    checkSign() {
      this.loading = true
      api.Exec.checkSignIn().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.isSignForDay = !!data.result
      }).finally(() => {
        this.loading = false
      })
    },
    sign() {
      if (!this.disabled && !this.isSignForDay) {
        this.loading = true
        this.disabled = true
        api.Exec.signIn({
          is_wx: isWxBrowser() ? '是' : '否'
        }).then(() => {
          this.$createToast({
            type: 'correct',
            txt: '操作成功',
            time: 300
          }).show()
          // sign in for day
          this.isSignForDay = true
          // reload
          this.reload()
        }).finally(() => {
          this.loading = false
          this.disabled = false
        })
      }
    },
    loadMore() {
      setTimeout(() => {
        this.getList(true)
      }, 200)
    },
    init() {
      this.queryList = {
        page: 0,
        pageSize: 10,
        busy: false
      }
      this.list = []
    },
    getList(append = false) {
      if (this.queryList.busy === false) {
        this.queryList.page++
        this.loading = true
        this.queryList.busy = true
        api.Exec.signInList({
          ...this.queryList
        }).then(response => {
          let { data } = response
          data = base64.parse(data)
          if (data.list.length === 0) {
            this.queryList.busy = true
          } else {
            this.queryList.busy = false
            if (append) {
              this.list = this.list.concat(data.list)
            } else {
              this.list = data.list
            }
          }
        }).finally(() => {
          this.loading = false
        })
      }
    }
  },
  created () {
    this.checkSign()
    this.init()
    this.getList()
  },
  activated () {
    // this.init()
    // this.getList()
  },
  deactivated () {
    this.queryList.busy = true
  }
}
</script>

<style scoped lang="stylus">
.service-sign
  .notice
    background white
    padding 20px
    border-radius 10px
    span
      line-height 30px
      font-size 14px
      &.active
        color red
        font-size 16px
        font-weight 700
  .list
    margin 10px 0
    .list-item
      background white
      margin-bottom 10px
      padding 15px
      text-align left
      p
        height 25px
        line-height 25px
        &.score
         span
           color red
           font-weight 700
           font-size 16px
        &.time, &.ip
         span
           color #ccc

</style>
